<!--警情会商-->
<template>
  <div>
    <el-scrollbar style="height: 560px" ref="scrollbar">
      <el-form :model="form" ref="form" :rules="rules">
        <el-row v-if="type == 1">
          <el-col :span="24">
            <el-form-item label="会商名称" prop="name">
              <el-input v-model="form.name" :maxlength="50"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="参会人员" prop="name" class="tagItem">
              <div v-for="tag in personList" :key="tag.name" class="tag">
                <el-tag v-if="tag.checked" closable :disable-transitions="false" @close="tag.checked = !tag.checked">
                  <img src="../../../../../assets/image/avatar.png" />
                  {{tag.name}}
                </el-tag>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="noLabel">
          <el-col>
            <el-form-item>
              <el-scrollbar style="height: 350px" ref="scrollbar">
                <ul class="selList">
                  <li v-for="(item,index) in personList" :key="index" @click="checkPerson(item)" :class="item.checked == true ? 'active':''">
                    <span>{{item.name}}</span>
                    <i class="iconfont iconduihao"></i>
                  </li>
                </ul>
              </el-scrollbar>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="btns">
        <el-button class="dialog-cancel" @click="clear()">取消</el-button>
        <el-button class="dialog-sure" type="primary" @click="submit">创建</el-button>
      </div>
    </el-scrollbar>
  </div>
</template>
<script>
import axios from "axios"
export default {
  components: {},
  props: {
    personList: {},
    type: 0,
    avList: {}
  },
  data: function () {
    return {
      form: {
        name: '',
      },
      rules: {},
    };
  },
  mounted() {


  },
  methods: {
    // 清空验证
    clear() {
      this.$refs.form.resetFields();
      this.$refs.form.clearValidate();
      if (this.type == 1) {
        this.personList.map(item => {
          item.checked = false
        })
      }
      this.$emit("close");
    },
    checkPerson(item) {
      item.checked = !item.checked;
    },
    submit() {
      var that = this;
      let userIdList = [];

      that.personList.map(item => {
        if (item.checked) {
          userIdList.push(item.id)
        }
      })
      this.form.userIdList = userIdList;

      if (that.type == 2) {
        this.form.id = that.avList.id;
        axios.post("/dispatch/meet/editMeetUser", that.form).then(function (res) {
          if (res.code == "200") {
            that.$message.success(res.message);
            that.clear();
            that.$emit("changePerson", that.form.userIdList);
          } else {
            that.$message.error(res.message);
          }
        }).catch(function (err) {
          console.log(`err${err}`);
        })
      } else {
        axios.post("/dispatch/meet/edit", that.form).then(function (res) {
          if (res.code == "200") {
            that.$message.success(res.message);
            that.clear();
            that.$emit("listQuery", "");
          } else {
            that.$message.error(res.message);
          }
        }).catch(function (err) {
          console.log(`err${err}`);
        })
      }


    },
  },
  watch: {
    avList: {
      handler: function (newV) {
        let self = this
        let arr2Ids = [];
        console.log(newV)
        if (self.type == 2) {
          arr2Ids = newV.list.map(item => item.id) //将已添加人员渲染出来
          self.personList.map(item => {
            if (arr2Ids.indexOf(item.id) > -1) {
              item.checked = true
            } else {
              item.checked = false
            }
          })
        } else {
          self.personList.map(item => {
            item.checked = false
          })
        }

      },
      immediate: true
    }
  }
};
</script>
<style lang="less" scoped>
::v-deep .el-input__inner {
  border-radius: 0;
}
.el-tag {
  margin-right: 10px;
  border: 0;
  background-color: transparent;
  color: #202227;
  font-size: 14px;
  padding-left: 0;
  ::v-deep .el-icon-close {
    background-color: #d7d7d8;
    border-radius: 100%;
    &::before {
      color: #fff;
    }
  }
}
::v-deep .noLabel {
  .el-form-item__content {
    margin-left: 80px;
  }
}
::v-deep .tagItem {
  .el-form-item__content {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
  }
  &.el-form-item {
    margin-bottom: 0;
  }
}
.tagItem {
  img {
    width: 28px;
    border-radius: 100%;
    vertical-align: middle;
    margin-right: 3px;
  }
}
.selList {
  border: 1px solid #dcdfe6;
  li {
    padding: 6px 10px;
    border-bottom: 1px solid #dcdfe6;
    color: #202227;
    cursor: pointer;
    .iconduihao {
      float: right;
      display: none;
    }
    &.active {
      color: #5a90ff;
      .iconduihao {
        display: inline-block;
      }
    }
  }
}
</style>